sdk/samples/all in on code/Visual Studio 2010/VBASPNETExcelLikeGridView/Default.aspx

   1 <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="VBASPNETExcelLikeGridView._Default" %>
   2
   3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml">
   5
   6 <head id="Head1" runat="server">
   7     <title>VBExcelLikeGridView</title>
   8     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript">
   9     </script>
  10     <script type="text/javascript">
  11
  12         //Function to read HidState (JSON) to keep the state color
  13         function ResetColors(color1, color2) {
  14             var contents = $(":hidden:last").val();
  15
  16             // If not "[]", meaning something changed, reset colors.
  17             if (contents.toString() != "[]") {
  18                 // Convert to JSON object.
  19                 var objectc = eval(contents);
  20
  21                 // To reset colors depending on whether it's changed
  22                 for (var i = 0; i < objectc.length; ++i) {
  23                     if (objectc[i].Color != '') {
  24                         $("td:eq(" + objectc[i].Index + ")").css("background-color", objectc[i].Color);
  25                     }
  26
  27                     var checked = objectc[i].Deleted == "True";
  28
  29                     if (parseInt(objectc[i].Index) % 2 == 0) {
  30                         $("td:eq(" + parseInt(objectc[i].Index - 2) + ")").find(":checkbox").attr("checked", checked);
  31                     }
  32                     else {
  33                         $("td:eq(" + parseInt(objectc[i].Index - 3) + ")").find(":checkbox").attr("checked", checked);
  34                     }
  35
  36                     // If a checkbox checked, change the row color
  37                     if (checked) {
  38                         $("td:eq(" + objectc[i].Index + ")").parent().css("background-color", "red");
  39                     }
  40                 }
  41             }
  42
  43         }
  44
  45         //Validation for Save
  46         function SaveValidate() {
  47             //first tell whether you've missed "Name" to be ful-filled...
  48
  49             if (Page_ClientValidate('Fill')) {
  50                 return confirm('Do you really want to save all these changes together?');
  51             }
  52             else {
  53                 alert("Attention! You cannot leave a name blank!");
  54             }
  55         }
  56
  57         //Validation for Insert
  58         function InsertValidate() {
  59             //first tell whether you've missed "Name" to be ful-filled...
  60
  61             if (!Page_ClientValidate('Insert')) {
  62                 alert("Attention! You cannot insert a blank name!");
  63             }
  64         }
  65
  66         // Add dynamically events for all textboxes
  67         // except the footer one to turn the background color.
  68         function AddEvents() {
  69
  70             var rowarray = $("tr");
  71             for (var i = 0; i < rowarray.length - 1; ++i) {
  72                 $(rowarray[i]).find(":text").change(function () {
  73                     $(this).parent().css("background", "blue");
  74                 });
  75             }
  76
  77         }
  78
  79         $(function () {
  80
  81             //Keep the original color row for odd
  82             var color1 = $("tr:eq(1)").css("background-color").valueOf();
  83             var color2 = $("tr:eq(2)").css("background-color").valueOf();
  84             var headercolor = $("tr:first").css("background-color").valueOf();
  85             var footercolor = $("tr:last").css("background-color").valueOf();
  86
  87             AddEvents();
  88
  89             // Header checkbox's cascading effect:
  90             $("#chkAll").click(function () {
  91
  92                 $(":checkbox").attr("checked", $(this).attr("checked"));
  93
  94                 if ($(this).attr("checked")) {
  95                     $(":checkbox").parent().parent().css("background-color", "red");
  96                     //Reset the color of header
  97                     $("tr:first").css("background-color", headercolor);
  98                 }
  99                 else {
 100                     $("tr:odd").css("background-color", color1);
 101                     $("tr:even").css("background-color", color2);
 102
 103                     //Reset the color of header and footer
 104                     $("tr:first").css("background-color", headercolor);
 105                     $("tr:last").css("background-color", footercolor);
 106                 }
 107             });
 108
 109             //Single checkbox checked event
 110             $(":checkbox").click(function () {
 111                 if ($(this).attr("checked")) {
 112                     $(this).parent().parent().css("background-color", "red");
 113                 }
 114                 else {
 115                     if ($(this).parent().parent().index() % 2 == 0) {
 116                         $(this).parent().parent().css("background-color", color2);
 117                     }
 118                     else {
 119                         $(this).parent().parent().css("background-color", color1);
 120                     }
 121                 }
 122
 123                 //Reset the header color
 124                 $("tr:first").css("background-color", headercolor);
 125             });
 126
 127             ResetColors(color1, color2);
 128         })
 129
 130     </script>
 131 </head>
 132 <body>
 133     <form id="form1" runat="server">
 134     <h1>
 135         Demo for Batching Actions</h1>
 136     <span style="color: Red">red row to be deleted</span>
 137     <br />
 138     <span style="color: green">green row to be added</span>
 139     <br />
 140     <span style="color: blue">blue cell to be modified</span>
 141     <br />
 142     <hr />
 143     <div>
 144         <asp:GridView ID="GridView1" runat="server" Width="70%" Height="50%" AutoGenerateColumns="False"
 145             CellPadding="4" ForeColor="#333333" GridLines="None" ShowFooter="True">
 146             <AlternatingRowStyle BackColor="White" />
 147             <Columns>
 148                 <asp:TemplateField HeaderText="Delete State">
 149                     <HeaderTemplate>
 150                         <input id="chkAll" type="checkbox" />
 151                         Delete
 152                     </HeaderTemplate>
 153                     <ItemTemplate>
 154                         <asp:CheckBox ID="chkDelete" runat="server" />
 155                     </ItemTemplate>
 156                 </asp:TemplateField>
 157                 <asp:TemplateField HeaderText="Id">
 158                     <ItemTemplate>
 159                         <%#Eval("Id") %>
 160                     </ItemTemplate>
 161                     <FooterTemplate>
 162                         Name:<asp:TextBox ID="tbNewName" runat="server"></asp:TextBox>
 163                         <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbNewName"
 164                             ErrorMessage="You cannot insert a balnk name!" ForeColor="#FFFF66" ValidationGroup="Insert"></asp:RequiredFieldValidator>
 165                     </FooterTemplate>
 166                 </asp:TemplateField>
 167                 <asp:TemplateField HeaderText="Name">
 168                     <ItemTemplate>
 169                         <asp:TextBox ID="tbName" runat="server" Text='<%#Eval("PersonName") %>'>
 170                         </asp:TextBox>
 171                         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbName"
 172                             ErrorMessage="You cannot leave a name blank!" ValidationGroup="Fill"></asp:RequiredFieldValidator>
 173                     </ItemTemplate>
 174                     <FooterTemplate>
 175                         Address:<asp:TextBox ID="tbNewAddress" runat="server"></asp:TextBox>
 176                     </FooterTemplate>
 177                 </asp:TemplateField>
 178                 <asp:TemplateField HeaderText="Address">
 179                     <ItemTemplate>
 180                         <asp:TextBox ID="tbAddress" runat="server" Text='<%#Eval("PersonAddress") %>'>
 181                         </asp:TextBox>
 182                     </ItemTemplate>
 183                     <FooterTemplate>
 184                         <asp:Button ID="btnAdd" runat="server" Text="Add a new row" OnClick="btnAdd_Click"
 185                             ValidationGroup="Insert" OnClientClick="InsertValidate()" />
 186                     </FooterTemplate>
 187                 </asp:TemplateField>
 188             </Columns>
 189             <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"
 190                 VerticalAlign="Middle" />
 191             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"
 192                 VerticalAlign="Middle" />
 193             <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 194             <RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Center" VerticalAlign="Middle" />
 195             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 196         </asp:GridView>
 197     </div>
 198     <asp:Button ID="btnSaveAll" runat="server" Height="30px" Text="Save All Changes"
 199         Width="149px" OnClick="btnSaveAll_Click" OnClientClick="SaveValidate()" ValidationGroup="Fill" />
 200     <asp:HiddenField ID="HidState" runat="server" Value="[]" />
 201     </form>
 202 </body>
 203 </html>